<%--
  Created by IntelliJ IDEA.
  User: yang
  Date: 7/24/20
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>ajax 案例1 get 请求</title>
    <style>
        div {
            border: 1px solid blue;
            width: 400px;
            height: 100px;
            font-size: 25px;
            color: red;
        }
    </style>
    <script src="../../js/jquery.min.js"></script>
    <script>
        $(function () {
            $("#div_2").text(new Date().getTime());


        })
        function testGet() {
            // 1 获取 XMLHttpRequest 对象
            let xgr;
            try {
                xgr = new XMLHttpRequest()
            } catch (e) {
                try {
                    xgr = new ActiveXObject("Microsoft.XMLHTTP");
                    // IE 5 及其 以前
                } catch (e) {
                    xgr = new ActiveXObject("Msxml2.XMLHTTP");
                    // IE 6 及其 以前
                }
            }

            // 2 开启连接 调用 open 方法
            // 参数 1

            // Get 请求
            // xgr.open("GET", "/teachers/ajax/t1?name=hmm", true);

            // Post 请求
            xgr.open("POST", "${theProjectName}"+"/ajax/t2");
            // post 设置请求头 Context-Type 模拟表单提交
            xgr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


            // 3 发出请求，调用 send 方法      get 请求，参数是 null
            xgr.send("name=tom");

            // 4 监听 响应状态 获取响应数据
            xgr.onreadystatechange = function () {
                // TODO 判断响应的状态
                /**
                 * readyState 记录的是服务器响应 ajax 请求的状态
                 * 0 没有开启连接
                 * 1 没有发送请求
                 * 2 发送请求，没有收到
                 * 3
                 * 4
                 */
                if (xgr.readyState === 4 && xgr.status === 200) {
                    // ajax 4           响应 200
                    // 获取响应数据
                    let date = xgr.responseText;
                    let message="<font color=\"red\">"+date+"</font>"
                    $("#div_1").html(message);
                }
            }

        }

    </script>


</head>
<body>

<div id="div_1"></div>

<input type="button" value="testAjaxGet" onclick="testGet();">
<div id="div_2"></div>
</body>
</html>
